@charset 'utf-8';
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
}

header {
    height: r(150);
    width: 100%;
    background: white;
    position: absolute;
    top: 0;
    div {
        vertical-align: middle;
    }
    .left {
        float: left;
        margin-left: r(30);
        margin-top: r(48);
        input {
           width: r(122);
            height: r(55);
            background: transparent;
            vertical-align: top;
            font-size: r(25);
            border: 1px solid #ff9344;
            border-radius: r(15);
        }
    }
    .right {
        float: right;
        margin-right: r(22);
        margin-top: r(54);
        img {
            width: r(48);
            height: r(48);
        }
    }
    .center {
        width: r(120);
        height: r(120);
        line-height: r(150);
        vertical-align: middle;
        margin: 0 auto;
        text-align: center;
        p {
            font-size: r(25);
        }
    }
}

footer {
    width: 100%;
    height: r(136);
    background: white;
    position: absolute;
    bottom: 0;
    ul {
        li {
            margin-top: r(16);
            float: left;
            width: 25%;
            height: 100%;
            text-align: center;
            a {
                color: black;
            }
            .iconfont {
                font-size: r(70);
                color: transparent;
                -webkit-text-stroke: r(1) #ff9344;
            }
            p {
                font-size: r(26);
            }
            &.active .iconfont {
                color: #FF9344;
            }
        }
    }
}

section {
    width: 100%;
    position: absolute;
    top: r(150);
    bottom: r(136);
    overflow-y: scroll;
    .top {
        width: 95%;
        margin: 0 auto;
        .img {
            width: r(705);
            height: r(259);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .center {
            margin: 0 auto;
            margin-top: r(30);
            width: 95%;
            .left {
                width: 50%;
                p:first-of-type {
                    font-size: r(60);
                    color: #ff9649;
                }
                p:nth-child(2) {
                    font-size: r(30);
                    padding-left: r(10);
                    margin-top: r(60);
                    img {
                        width: r(35);
                        height: r(35);
                        margin-right: r(14);
                    }
                    span {
                        color: #ff9649;
                    }
                }
            }
            .right {
                width: 50%;
                text-align: right;
                button {
                    width: r(111);
                    height: r(60);
                    border-radius: r(20);
                    font-size: r(30);
                    color: white;
                    background: #ff9649;
                    margin-top: r(6);
                }
                p {
                    margin-top: r(75);
                    font-size: r(30);
                    a {
                        color: #a7a7a7;
                    }
                }
            }
        }
        .bottom {
            width: 95%;
            margin: 0 auto;
            margin-top: r(36);
            background: #ff9649;
            margin-bottom: r(10);
            ul {
                li {
                    font-size: r(30);
                    color: white;
                    padding: 0 r(10);
                    line-height: r(67);
                    a{
                        color: #000000;
                    }
                }
            }
        }
    }
    .itemBox {
        width: 90%;
        margin: 0 auto;
        background: #FFFFFF;
        div {
            margin-bottom: r(10);
            ul {
                li {
                    white-space: nowrap;
                }
                #img {
                    float: left;
                    width: 33%;
                    img {
                        width: r(176);
                        height: r(176);
                    }
                }
                #center {
                    float: right;
                    //                  line-height: px(50px);
                    width: 50%;
                    &>p:first-child {
                        font-size: r(30);
                    }
                    &>p:nth-child(2) {
                        font-size: r(26);
                        color: #a7a7a7;
                        img {
                            width: r(35);
                            height: r(35);
                            margin-right: r(5);
                        }
                    }
                    &>p:nth-child(3) {
                        font-size: r(24);
                        color: #a7a7a7;
                    }
                    &>p:nth-child(4) {
                        font-size: r(20);
                        margin-top: r(23);
                        a {
                            color: #ff9649;
                        }
                    }
                }
                #right {
                    float: right;
                    width: 17%;
                    button {
                        width: r(111);
                        height: r(60);
                        border-radius: r(20);
                        font-size: r(30);
                        color: white;
                        background: #ff9649;
                        margin-top: r(67);
                    }
                }
            }
        }
    }
}